<template>
    <view>
        <form @submit="savepubinfo" report-submit>
            <view class="container">
                <view class="main">
                    <view class="header">完善简历资料</view>
                    <view class="title">个人基本信息</view>
                    <view class="list">
                        <view class="item">
                            <view class="name">
                                现居住地
                                <text>*</text>
                            </view>
                            <view class="selectitem">
                                <input type="text" :value="noteinfo.address ? noteinfo.address : ''" name="address" placeholder="请输入现居住地" cursor-spacing="140" />
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">希望工作地区</view>
                            <view class="selectitem">
                                <picker :value="Index" :range="arealist" range-key="name" @change="bindAreaChange">
                                    <view class="picker">
                                        {{ arealist[areaindexid].name ? arealist[areaindexid].name : '请选择工作地区' }}
                                    </view>
                                </picker>
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">目前状态</view>
                            <view class="selectitem">
                                <picker :value="Index" :range="currentlist" range-key="name" @change="bindCurrentChange">
                                    <view class="picker">
                                        {{ currentlist[currentindexid].name ? currentlist[currentindexid].name : '请选择目前状态' }}
                                    </view>
                                </picker>
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">就业帮扶</view>
                            <view class="selectitem">
                                <picker :value="Index" :range="helplablist" range-key="name" @change="bindHelplabChange">
                                    <view class="picker">
                                        {{ helplablist[helplabindexid].name ? helplablist[helplabindexid].name : '请选择就业帮扶' }}
                                    </view>
                                </picker>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="weixinmao-float">
                <view class="weixinmao-foot">
                    <button class="footer" formType="submit">立即完善</button>
                </view>
            </view>
        </form>
    </view>
</template>

<script>
import { Note } from '../findworker/note-model.js';
var note = new Note();
export default {
    data() {
        return {
            /*
              formats: {},
              readOnly: false,
              placeholder: '开始输入...',
              editorHeight: 300,
              keyboardHeight: 0,
              isIOS: false,
              */
            speciallist: [
                {
                    name: '五险一金',
                    checked: false
                },
                {
                    name: '补充医疗保险',
                    checked: false
                },
                {
                    name: '员工旅游',
                    checked: false
                },
                {
                    name: '交通补贴',
                    checked: false
                },
                {
                    name: '餐饮补贴',
                    checked: false
                },
                {
                    name: '出国机会',
                    checked: false
                },
                {
                    name: '年终奖金',
                    checked: false
                },
                {
                    name: '定期体检',
                    checked: false
                }
            ],

            birthday: [
                '1960',
                '1961',
                '1962',
                '1963',
                '1964',
                '1965',
                '1966',
                '1967',
                '1968',
                '1969',
                '1970',
                '1971',
                '1972',
                '1973',
                '1974',
                '1975',
                '1976',
                '1977',
                '1978',
                '1979',
                '1980',
                '1981',
                '1982',
                '1983',
                '1984',
                '1985',
                '1986',
                '1987',
                '1988',
                '1989',
                '1990',
                '1991',
                '1992',
                '1993',
                '1994',
                '1995',
                '1996',
                '1997',
                '1998',
                '1999',
                '2000',
                '2001',
                '2002',
                '2003',
                '2004'
            ],
            birthdayindex: -1,
            birthdayname: '',
            education: ['初中', '高中', '中技', '中专', '大专', '本科', '硕士', '博士', '博后'],
            educationindex: -1,
            educationname: '',
            express: ['无经验', '1年以下', '1-3年', '3-5年', '5-10年', '10年以上'],
            expressindex: -1,
            expressname: '',
            currentstatus: ['我目前已离职,可快速到岗', '我目前在职，但考虑换个新环境', '观望有好的机会再考虑', '目前暂无跳槽打算', '应届毕业生'],
            currentstatusindex: -1,
            currentstatusname: '',
            worktype: ['全职', '兼职', '实习'],
            worktypeindex: -1,
            worktypename: '',
            money: ['1千~2千/月', '2千~3千/月', '3千~4千/月', '4千~5千/月', '5千~1万/月', '1万以上/月'],
            moneyindex: -1,
            moneyname: '',
            arealist: [],
            areaindexid: -1,
            areaid: 0,
            currentlist: [],
            currentindexid: -1,
            currentid: 0,
            worktypelist: [],
            worktypeindexid: -1,
            worktypeid: 0,
            helplablist: [],
            helplabindexid: -1,
            helplabid: 0,
            imgurl1: false,
            true1: true,
            show1: 'none',
            logoimglist: [],
            imgs1: [],
            jobcateindex: '',

            noteinfo: {
                address: false
            },

            jobcate: '',
            editorHeight: '',
            keyboardHeight: '',
            formats: '',
            imgs2: '',
            show2: '',
            Index: 0,
            name: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        uni.setNavigationBarTitle({
            title: '完善资料'
        });
        var that = this;
        var cityinfo = uni.getStorageSync('cityinfo');
        if (cityinfo) {
            uni.setStorageSync('city', cityinfo.name);
            that.initpage();
        } else {
            //获取信息
            qqmapsdk = new QQMapWX({
                key: '5D3BZ-J55WF-SFPJJ-NI6PG-YN2ZO-M4BHX' // 必填
            });

            uni.getLocation({
                type: 'gcj02',
                // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
                success: function (res) {
                    uni.setStorageSync('latitude', res.latitude);
                    uni.setStorageSync('longitude', res.longitude);
                    qqmapsdk.reverseGeocoder({
                        location: {
                            latitude: res.latitude,
                            longitude: res.longitude
                        },
                        success: function (addressRes) {
                            var address = addressRes.result.address_component.city;
                            var city = address.substr(0, address.length - 1);
                            console.log(city);
                            uni.setStorageSync('city', city);
                            that.initpage();
                        }
                    });
                },
                fail: function () {
                    // fail

                    that.initpage();
                },
                complete: function () {
                    // complete
                }
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        initpage: function () {
            var that = this;
            var city;
            city = uni.getStorageSync('city');
            var params = {
                city: city
            };
            note.getPubNoteInit((data) => {
                console.log(data);
                that.arealist = data.arealist;
                that.currentlist = data.currentlist;
                that.worktypelist = data.worktypelist;
                that.helplablist = data.helplablist;
                var noteinfo = data.noteinfo;
                if (noteinfo) {
                    /*
                  const query = wx.createSelectorQuery();
          
                  query.select('#editor')
              
                    .context(function (res) {
              
                      res.context.setContents({
              
                        html: noteinfo.content
              
                      })
          
                    
                      that.editorCtx = res.context
                      wx.pageScrollTo({
                        scrollTop: 0,
                        success: () => {
                          that.editorCtx.scrollIntoView()
                        }
                      })
          
              
                    }).exec();
          
          */

                    that.birthdayindex = isHasElementOne(that.birthday, noteinfo.birthday);
                    that.birthdayname = noteinfo.birthday;
                    that.jobcateindex = isHasElementTwo(data.jobcatelist, noteinfo.jobcateid);
                    that.jobcateid = noteinfo.jobcateid;
                    that.areaindexid = isHasElementTwo(data.arealist, noteinfo.areaid);
                    that.areaid = noteinfo.areaid;
                    that.educationindex = isHasElementOne(that.education, noteinfo.education);
                    that.educationname = noteinfo.education;
                    that.expressindex = isHasElementOne(that.express, noteinfo.express);
                    that.expressname = noteinfo.express;
                    that.currentindexid = isHasElementTwo(data.currentlist, noteinfo.currentid);
                    that.currentid = noteinfo.currentid;
                    that.helplabindexid = isHasElementTwo(data.helplablist, noteinfo.helplabid);
                    that.helplabid = noteinfo.helplabid;
                    that.moneyindex = isHasElementOne(that.money, noteinfo.money);
                    that.moneyname = noteinfo.money;
                    that.worktypeindex = isHasElementOne(that.worktype, noteinfo.worktype);
                    that.worktypename = noteinfo.worktype;
                    that.currentstatusindex = isHasElementOne(that.currentstatus, noteinfo.currentstatus);
                    that.currentstatusname = noteinfo.currentstatus;
                    that.show1 = false;
                    that.logoimglist.push(noteinfo.avatarUrl);
                    that.imgs1.push(noteinfo.avatarUrl);
                    that.setData({
                        birthdayindex: that.birthdayindex,
                        jobcateindex: that.jobcateindex,
                        educationindex: that.educationindex,
                        expressindex: that.expressindex,
                        moneyindex: that.moneyindex,
                        currentstatusindex: that.currentstatusindex,
                        areaindexid: that.areaindexid,
                        currentindexid: that.currentindexid,
                        helplabindexid: that.helplabindexid,
                        worktypeindex: that.worktypeindex,
                        noteinfo: data.noteinfo,
                        show1: that.show1,
                        imgs1: that.imgs1
                    });
                }
                that.setData({
                    jobcate: data.jobcatelist,
                    arealist: that.arealist,
                    currentlist: that.currentlist,
                    worktypelist: that.worktypelist,
                    helplablist: that.helplablist
                });
            }, params);
        },

        updatePosition(keyboardHeight) {
            const toolbarHeight = 50;
            const { windowHeight, platform } = uni.getSystemInfoSync();
            let editorHeight = keyboardHeight > 0 ? windowHeight - keyboardHeight - toolbarHeight : windowHeight;
            this.setData({
                editorHeight,
                keyboardHeight
            });
        },

        calNavigationBarAndStatusBar() {
            const systemInfo = uni.getSystemInfoSync();
            const { statusBarHeight, platform } = systemInfo;
            const isIOS = platform === 'ios';
            const navigationBarHeight = isIOS ? 44 : 48;
            return statusBarHeight + navigationBarHeight;
        },

        onEditorReady() {
            const that = this;
            console.log('fffffff');
            uni.createSelectorQuery()
                .in(uni)
                .select('#editor')
                .context(function (res) {
                    that.editorCtx = res.context;
                })
                .exec();
        },

        blur() {
            this.editorCtx.blur();
        },

        format(e) {
            let { name, value } = e.target.dataset;
            if (!name) {
                return;
            }
            // console.log('format', name, value)
            this.editorCtx.format(name, value);
        },

        onStatusChange(e) {
            const formats = e.detail;
            console.log(formats);
            this.setData({
                formats
            });
        },

        insertDivider() {
            this.editorCtx.insertDivider({
                success: function () {
                    console.log('insert divider success');
                }
            });
        },

        clear() {
            this.editorCtx.clear({
                success: function (res) {
                    console.log('clear success');
                }
            });
        },

        removeFormat() {
            this.editorCtx.removeFormat();
        },

        insertDate() {
            const date = new Date();
            const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            this.editorCtx.insertText({
                text: formatDate
            });
        },

        insertImage() {
            const that = this;
            uni.chooseImage({
                count: 1,
                success: function (res) {
                    that.editorCtx.insertImage({
                        src: res.tempFilePaths[0],
                        data: {
                            id: 'abcd',
                            role: 'god'
                        },
                        width: '80%',
                        success: function () {
                            console.log('insert image success');
                        }
                    });
                }
            });
        },

        savepubinfo: function (e) {
            var that = this;
            var address = e.detail.value.address;
            var areaid = this.areaid;
            var currentid = that.currentid;
            var helplabid = that.helplabid;
            if (address == '') {
                uni.showModal({
                    title: '提示',
                    content: '请输入现在居住地',
                    showCancel: false
                });
                return;
            }
            if (areaid == 0) {
                uni.showModal({
                    title: '提示',
                    content: '请选择希望工作地区',
                    showCancel: false
                });
                return;
            }
            if (currentid == 0) {
                uni.showModal({
                    title: '提示',
                    content: '请选择目前状态',
                    showCancel: false
                });
                return;
            }
            if (helplabid == 0) {
                uni.showModal({
                    title: '提示',
                    content: '请选择就业帮扶',
                    showCancel: false
                });
                return;
            }
            var params = {
                address: address,
                areaid: areaid,
                currentid: currentid,
                helplabid: helplabid
            };
            note.Savenote((data) => {
                uni.switchTab({
                    url: '/pages/user/index'
                });
            }, params);
        },

        deleteImg1: function (e) {
            var that = this;
            var index = e.currentTarget.dataset.index;
            that.logoimglist = [];
            that.setData({
                imgs1: [],
                show1: 'none'
            });
            console.log(index);
        },

        radioChange: function (e) {
            this.sex = e.detail.value;
        },

        bindAreaChange: function (e) {
            var arealist = this.arealist;
            if (arealist) {
                this.areaid = arealist[e.detail.value].id;
                this.areaindexid = e.detail.value;
            }
            this.setData({
                arealist: arealist,
                areaindexid: e.detail.value
            });
        },

        bindCurrentChange: function (e) {
            var currentlist = this.currentlist;
            if (currentlist) {
                this.currentid = currentlist[e.detail.value].id;
                this.currentindexid = e.detail.value;
            }
            this.setData({
                currentlist: currentlist,
                currentindexid: e.detail.value
            });
        },

        bindHelplabChange: function (e) {
            var helplablist = this.helplablist;
            if (helplablist) {
                this.helplabid = helplablist[e.detail.value].id;
                this.helplabindexid = e.detail.value;
            }
            this.setData({
                helplablist: helplablist,
                helplabindexid: e.detail.value
            });
        },

        bindJobcateChange: function (e) {
            var jobcate = this.jobcate;
            if (jobcate) {
                this.jobcateindex = e.detail.value;
                this.jobcateid = jobcate[e.detail.value].id;
            }
            this.setData({
                jobcate: jobcate,
                jobcateindex: e.detail.value
            });
        },

        bindExpressChange: function (e) {
            var express = this.express;
            if (express) {
                this.expressindex = e.detail.value;
                this.expressname = express[e.detail.value];
            }
            console.log(this.expressname);
            this.setData({
                express: express,
                expressindex: e.detail.value
            });
        },

        bindBirthdayChange: function (e) {
            var birthday = this.birthday;
            if (birthday) {
                this.birthdayindex = e.detail.value;
                this.birthdayname = birthday[e.detail.value];
            }
            this.setData({
                birthday: birthday,
                birthdayindex: e.detail.value
            });
        },

        bindEducationChange: function (e) {
            var education = this.education;
            if (education) {
                this.educationindex = e.detail.value;
                this.educationname = education[e.detail.value];
            }
            console.log(this.educationname);
            this.setData({
                education: education,
                educationindex: e.detail.value
            });
        },

        bindWorktypeChange: function (e) {
            var worktype = this.worktype;
            if (worktype) {
                this.worktypeindex = e.detail.value;
                this.worktypename = worktype[e.detail.value];
            }
            console.log(this.worktypename);
            this.setData({
                worktype: worktype,
                worktypeindex: e.detail.value
            });
        },

        bindMoneyChange: function (e) {
            var money = this.money;
            if (money) {
                this.moneyindex = e.detail.value;
                this.moneyname = money[e.detail.value];
            }
            console.log(this.moneyname);
            this.setData({
                money: money,
                moneyindex: e.detail.value
            });
        },

        bindCurrentstatusChange: function (e) {
            var currentstatus = this.currentstatus;
            if (currentstatus) {
                this.currentstatusindex = e.detail.value;
                this.currentstatusname = currentstatus[e.detail.value];
            }
            console.log(this.currentstatusname);
            this.setData({
                currentstatus: currentstatus,
                currentstatusindex: e.detail.value
            });
        },

        chooseImg: function (e) {
            var that = this;
            var count = 9;
            var id = parseInt(e.currentTarget.dataset.id);
            if (id == 1) {
                count = 1;
            }
            uni.chooseImage({
                count: count,
                // 默认9
                sizeType: ['compressed'],
                // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'],
                // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

                    var tempFilePaths = res.tempFilePaths;
                    var imgs = [];
                    if (id == 1) {
                        that.logoimglist = [];
                        that.setData({
                            imgs1: tempFilePaths,
                            show1: 'block'
                        });
                    } else if (id == 2) {
                        that.imagelist = [];
                        that.imgs2 = tempFilePaths;
                        that.setData({
                            imgs2: tempFilePaths,
                            show2: 'block'
                        });
                    }

                    // var tempFilePaths = that.data.imgs

                    for (var s = 0; s < tempFilePaths.length; s++) {
                        console.log(tempFilePaths[s]);
                        that.uploadimg(tempFilePaths[s], id);
                    }
                },
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        uploadimg: function (path, id) {
            //var uploadurl = app.util.geturl({ 'url': 'entry/wxapp/upload' });
            // var id = id;
            uni.showToast({
                icon: 'loading',
                title: '正在上传'
            });
            var that = this;
            var params = {
                path: path
            };
            note.uploadimg((data) => {
                console.log(data);
                if (id == 1) {
                    console.log(data.imgpath);
                    that.logoimglist.push(data.imgpath);
                    console.log(that.logoimglist);
                } else if (id == 2) {
                    that.imagelist.push(data.imgpath);
                }
            }, params);
        }
    }
};
function isHasElementOne(arr, value) {
    for (var i = 0, vlen = arr.length; i < vlen; i++) {
        if (arr[i] == value) {
            return i;
        }
    }
    return -1;
}
function isHasElementTwo(arr, value) {
    for (var i = 0, vlen = arr.length; i < vlen; i++) {
        if (arr[i]['id'] == value) {
            return i;
        }
    }
    return -1;
}
</script>
<style>
.container {
    background-color: #f5f5f5;
    min-height: 100%;
    margin-bottom: 20%;
}
.container .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container .main .header {
    width: 730rpx;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    font-size: 0.9rem;
    padding-left: 20rpx;
    color: #000;
    text-align: center;
    background: #fff;
}
.container .main .title {
    width: 730rpx;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    font-size: 0.9rem;
    padding-left: 20rpx;
    color: #888888;
}

.container .main .list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
}

::-webkit-input-placeholder {
    color: #000;
    font-size: 18px;
}

.container .main .list .item {
    width: 700rpx;
    border-bottom: 1rpx solid #f5f5f5;
    align-self: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    /*
flex-direction: row;
justify-content:space-between;
*/
}
.container .main .list .item .name {
    font-size: 14px;
    color: #a2a2a2;
}
.container .main .list .item .name text {
    color: red;
}
.container .main .list .item .selectitem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #808080;
    font-size: 14px;
    height: 100rpx;
    line-height: 100rpx;
    background: #fff;
}

.container .main .list .item .selectitem input {
    height: 100rpx;
    width: 740rpx;
    color: #000;
    font-size: 18px;
}

.container .main .list .item .selectitem > image {
    width: 30rpx;
    height: 30rpx;
    align-self: center;
}
.container .main .checklist {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    background: #fff;
    flex-wrap: wrap;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    padding-left: 20rpx;
}
.radio {
    font-size: 18px;
}
.picker {
    font-size: 18px;
}
.container .main .checklist checkbox-group {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.container .main .checklist .checkitem {
    font-size: 0.7rem;
    width: 240rpx;
    margin-top: 10rpx;
}

.container .doagree {
    font-size: 0.7rem;
    margin-left: 50rpx;
    margin-top: 40rpx;
    margin-bottom: 280rpx;
    padding-bottom: 50rpx;
}

.container .main .imglist {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #fff;
}

.container .main .imglist .imgitem {
    width: 200rpx;
    border: 1rpx dotted #f5f5f5;
    position: relative;
}
.container .main .imglist .imgitem image {
    width: 200rpx;
    height: 200rpx;
}

.sum {
    position: absolute;
    width: 45rpx;
    height: 45rpx;
    border-radius: 50%;
    background: #3274e5;
    top: -10rpx;
    left: 150rpx;
    color: #fff;
    z-index: 1000;
    font-size: 0.7rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.sum text {
    font-size: 0.7rem;
    align-self: center;
}

.weixinmao-msg {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2001;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.weixinmao-content {
    width: 720rpx;
    height: 450rpx;
    z-index: 4001;
    background: #fff;
    align-self: center;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map {
    height: 850rpx;
}
.mapbtn {
    background: #3274e5;
    color: #fff;
    font-size: 1rem;
    width: 400rpx;
}
.weixinmao-content .title {
    border-bottom: 1rpx solid #e5e5e5;
    width: 100%;
    text-align: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    font-size: 0.8rem;
    background: #3274e5;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.weixinmao-content .title view:nth-child(1) {
    width: 30%;
}

.weixinmao-content .title view:nth-child(2) {
    width: 40%;
}

.weixinmao-content .title view:nth-child(3) {
    width: 30%;
}

.weixinmao-content .list {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.weixinmao-content .list .item {
    width: 100%;
    align-self: center;
    text-align: center;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.weixinmao-foot {
    display: flex;
    justify-content: center;
    flex-direction: row;

    z-index: 999;

    width: 100%;
}

.weixinmao-foot view {
    color: #fff;
    align-self: center;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 0.9rem;
    display: flex;
    flex-direction: row;
    width: 50%;
    border-radius: 0rpx;
    padding-left: 30rpx;
    background: #e64340;
}
.weixinmao-foot button {
    background: #07b56d;
    width: 100%;
    color: #fff;
    border-radius: 0rpx;
    font-size: 1rem;
}

.ismaster {
    color: red;
    font-weight: bold;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-top: 30rpx;
    align-self: center;
}

.selectitem textarea {
    width: 100%;
}

.masterbtn {
    margin-top: 100rpx;
    width: 300rpx;
    background: #3274e5;
    color: #fff;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 5rpx;
    text-align: center;
    font-size: 0.7rem;
}

.weixinmao-msg_show {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2001;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.weixinmao-content_show {
    width: 550rpx;
    height: 600rpx;
    z-index: 4001;
    background: #fff;
    align-self: center;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.weixinmao-content_show .title {
    border-bottom: 1rpx solid #e5e5e5;
    width: 100%;
    text-align: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    font-size: 0.8rem;
    background: #3274e5;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.weixinmao-content_show .title view:nth-child(1) {
    width: 30%;
}

.weixinmao-content_show .title view:nth-child(2) {
    width: 40%;
}

.weixinmao-content_show .title view:nth-child(3) {
    width: 30%;
}

.weixinmao-content_show .list {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.weixinmao-content_show .list .item {
    width: 100%;
    align-self: center;
    text-align: center;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.heaerpic {
    width: 380rpx;
    height: 250rpx;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.heaerpic image {
    width: 160rpx;
    height: 160rpx;
    border: 7rpx solid #fff;
    border-radius: 160rpx;
}
.heaerpic view {
    height: 80rpx;
    line-height: 80rpx;
    width: 380rpx;
    text-align: center;
    font-size: 0.8rem;
}

.ql-container {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    font-size: 16px;
    line-height: 1.5;
    overflow: auto;
    padding: 10px 10px 20px 10px;
    border: 1px solid #ececec;
}

.ql-active {
    color: #22c704;
}

.iconfont {
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 20px;
}

.toolbar {
    box-sizing: border-box;
    padding: 0 10px;
    height: 50px;
    width: 100%;
    position: fixed;
    left: 0;
    right: 100%;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ececec;
    border-left: none;
    border-right: none;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

.uploadlist {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50rpx;

    background: #fff;
}
.uploadlist .title {
    width: 700rpx;
    color: #141c31;
    font-weight: bold;
    font-size: 1.1rem;
    align-self: left;
}

.uploadlist .item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 20rpx;
    width: 650rpx;
}

.uploadlist .title view:nth-child(2) {
    color: #808080;
    font-size: 0.7rem;
    font-weight: 300;
    margin-top: 10rpx;
}

.uploadlist .item .uploadimg {
    width: 300rpx;
    height: 300rpx;
    border-radius: 5rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.uploadlist .item .uploadimg image {
    width: 120rpx;
    height: 120rpx;
}
.uploadlist .item .uploadimg .uploadtitle {
    color: #808080;
    font-size: 0.7rem;
}

.imgsbox {
    width: 690rpx;
    padding: 20rpx;
    margin: auto;
    background: #fff;
    border-radius: 0 0 14rpx 14rpx;
    border: 1px solid #d6d7dc;

    box-sizing: border-box;
    overflow: hidden;
}
.weui-cells {
    font-size: 30rpx !important;
}

.weui-cell::before {
    border-top: 1rpx solid #eee;
}
.upload-img-btn image {
    width: 185rpx;
    height: 185rpx;
}
.upload-img-btn {
    float: left;
}
.img {
    width: 185rpx;
    height: 185rpx;
    float: left;
    margin: 15rpx;
    position: relative;
    overflow: hidden;
}

.delete-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 40rpx;
    width: 100%;
}
.img image {
    width: 185rpx;
    height: 185rpx;
}

.imgx {
    width: 15rpx;
    height: 15rpx;
}
.weui-select {
    border-right: none;
}
.weui-uploader__hd {
    float: left;
}
.weui-uploader__title {
    width: 150rpx !important;
}
.weui-label {
    width: 150rpx !important;
}
.upload-img-btn image {
    margin: 10rpx;
}
</style>
